<template>
  <div>
    <div class="flex h-[280px] overflow-hidden">
      <div class="flex-1 h-full">
        <psmReport-pie
          :id="`${activeTabs}_allTotal`"
          key="1"
          :title="params?.yearOrderTotalNumber?.name ?? `${year}年生成工单`"
          :params="params?.yearOrderTotalNumber?.data ?? []"
          @handle-click="handleClick"
        />
      </div>
      <div class="flex-1 h-full">
        <psmReport-bar
          :id="`${activeTabs}_allClose`"
          key="3"
          :title="params?.yearOrderCloseRate?.name ?? `${year}年工单关闭率`"
          :params="params?.yearOrderCloseRate ?? {}"
          @handle-click="handleClick1"
        />
      </div>
      <div class="flex-1 h-full">
        <psmReport-pie
          :id="`${activeTabs}_allMonthCount`"
          key="3"
          :title="
            params?.monthOrderBuildNumber?.name ?? `${year}年${month}月生成工单`
          "
          :params="params?.monthOrderBuildNumber?.data ?? []"
          @handle-click="handleClick2"
        />
      </div>
      <div class="flex-1 h-full">
        <psmReport-pie
          :id="`${activeTabs}_allMonthClose`"
          key="4"
          :title="
            params?.monthOrderCloseNumber?.name ?? `${year}年${month}月关闭工单`
          "
          :params="params?.monthOrderCloseNumber?.data ?? []"
          @handle-click="handleClick3"
        />
      </div>
    </div>
    <el-divider />
    <div class="flex h-[280px] overflow-hidden">
      <div class="flex-1 h-full">
        <psmReport-line
          :id="`${activeTabs}_yearTotal`"
          key="1"
          title="年度工单"
          :params="params?.yearOrderTrend ?? []"
          @handle-click="handleClick4"
        />
      </div>
      <div class="flex-1 h-full">
        <psmReport-line
          :id="`${activeTabs}_monthTotal`"
          key="2"
          title="月度工单"
          :params="params?.monthOrderTrend ?? []"
          @handle-click="handleClick5"
        />
      </div>
    </div>
    <el-divider />
    <div class="mb-[26px] overflow-hidden">
      <psmReport-table-year1 :params="params?.orderListByFrequency ?? []" />
    </div>
    <!-- <el-divider /> -->
    <psmReport-table-year2 :params="params?.orderListByDealTime ?? []" />
  </div>
</template>

<script lang="ts" setup>
import { useDictionary } from "@/utils/useTable";
import router from "@/router";
import dayjs from "dayjs";

const props = defineProps({
  activeTabs: {
    type: String,
    default: () => {
      return "";
    },
  },
  year: {
    type: String,
    default: () => {
      return "";
    },
  },
  month: {
    type: String,
    default: () => {
      return "";
    },
  },
  type: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {
        monthOrderBuildNumber: null,
        monthOrderCloseNumber: null,
        monthOrderTrend: null,
        orderListByDealTime: null,
        orderListByFrequency: null,
        yearOrderCloseRate: null,
        yearOrderTotalNumber: null,
        yearOrderTrend: null,
      };
    },
  },
});
const { type, params, month, year, activeTabs } = toRefs(props);

const option = ref<any>();

watch(
  () => params.value,
  (newValue) => {},
  {
    deep: true,
    immediate: false,
  }
);

// 统计 年度 所有
function handleClick(index: number) {
  const obj = params.value?.yearOrderTotalNumber?.data[index];
  router.push({
    path: "/pcm/psmworkorder",
    query: {
      workshopSectionCode: obj.name,
      collectionTimeStart: dayjs()
        .year(Number(year.value))
        .startOf("year")
        .valueOf(),
      collectionTimeEnd: dayjs()
        .year(Number(year.value))
        .endOf("year")
        .valueOf(),
    },
  });
}

// 统计 年度 关闭
function handleClick1(index: number) {
  const obj = params.value?.yearOrderCloseRate?.xdata[index];
  router.push({
    path: "/pcm/psmworkorder",
    query: {
      workshopSectionCode: obj,
      collectionTimeStart: dayjs()
        .year(Number(year.value))
        .startOf("year")
        .valueOf(),
      collectionTimeEnd: dayjs()
        .year(Number(year.value))
        .endOf("year")
        .valueOf(),
      workOrderStatus: 2,
    },
  });
}

// 统计 当月 所有
function handleClick2(index: number) {
  // 获取当月第一天
  const firstDay = dayjs()
    .year(Number(year.value))
    .month(Number(month.value) - 1)
    .startOf("month")
    .valueOf();
  // 获取当月最后一天
  const lastDay = dayjs()
    .year(Number(year.value))
    .month(Number(month.value) - 1)
    .endOf("month")
    .valueOf();
  const obj = params.value?.monthOrderBuildNumber?.data[index];
  router.push({
    path: "/pcm/psmworkorder",
    query: {
      workshopSectionCode: obj.name,
      collectionTimeStart: firstDay,
      collectionTimeEnd: lastDay,
    },
  });
}

// 统计 当月 所有
function handleClick3(index: number) {
  // 获取当月第一天
  const firstDay = dayjs()
    .year(Number(year.value))
    .month(Number(month.value) - 1)
    .startOf("month")
    .valueOf();
  // 获取当月最后一天
  const lastDay = dayjs()
    .year(Number(year.value))
    .month(Number(month.value) - 1)
    .endOf("month")
    .valueOf();
  const obj = params.value?.monthOrderBuildNumber?.data[index];
  router.push({
    path: "/pcm/psmworkorder",
    query: {
      workshopSectionCode: obj.name,
      collectionTimeStart: firstDay,
      collectionTimeEnd: lastDay,
      workOrderStatus: 2,
    },
  });
}

// 统计 不同年份 工单类型不同
function handleClick4(param: any) {
  router.push({
    path: "/pcm/psmworkorder",
    query: {
      collectionTimeStart: dayjs()
        .year(Number(param.name))
        .startOf("year")
        .valueOf(),
      collectionTimeEnd: dayjs()
        .year(Number(param.name))
        .endOf("year")
        .valueOf(),
      workOrderStatus: param?.seriesName.includes("关闭") ? 2 : undefined,
    },
  });
}

// 统计 不同月份 工单类型不同
function handleClick5(param: any) {
  // 获取当月第一天
  const firstDay = dayjs()
    .year(Number(year.value))
    .month(Number(param.name) - 1)
    .startOf("month")
    .valueOf();

  // 获取当月最后一天
  const lastDay = dayjs()
    .year(Number(year.value))
    .month(Number(param.name) - 1)
    .endOf("month")
    .valueOf();

  router.push({
    path: "/pcm/psmworkorder",
    query: {
      collectionTimeStart: firstDay,
      collectionTimeEnd: lastDay,
      workOrderStatus: param?.seriesName.includes("关闭") ? 2 : undefined,
    },
  });
}

onMounted(() => {});
</script>

<style lang="scss" scoped>
:deep(.el-divider--horizontal) {
  margin: 7px 0;
}
</style>
